<template>
  <div class="article_container">

    <div class="header">
      <div class="blog_nav">
        <div class="tag_list">
          <div @click="handleCheckParent(tag.id, index)" v-for="(tag, index) in categoryBaseList" :key="index"
            :class="['blog_nav_item', { active: navIndex === index }]">
            {{ tag.name }}
          </div>
        </div>
      </div>

      <div class="blog_tag">
        <div class="blog_tag_list" v-if="categoryChildrenList.length > 0">
          <div :class="['blog_tag_item', { active: tagIndex === index }]" @click="handleCheckChildren(tag.id, index)"
            v-for="(tag, index) in categoryChildrenList" :key="index">
            {{ tag.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="article_list" v-if="articleList.length" v-loading.fullscreen.lock="fullscreenLoading">
        <div class="article_item" v-for="(article, index) in articleList" :key="index"
          @click="handleArticleInfo(article.id)">
          <div class="article_cover">
            <img v-lazy="article.mainImg" :key="article.mainImg" alt="" />
          </div>
          <div class="article_right">
            
            <div class="title">{{ article.title }}</div>
            <div class="summary">{{ article.summary }}</div>
            <div class="article_meta">
              <span class="meta_data">作者：{{ article.authorName }}</span>
              <span class="meta_data"><svg-icon icon-class="eye" color="#85b13b" />{{ article.readVolume }}阅读</span>
              <span class="meta_data"><svg-icon icon-class="like" color="#85b13b" />{{ article.likeVolume }}点赞</span>
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <pagination v-show="total > 0" :total="total" v-model:page="pageQuery.pageNum"
          v-model:limit="pageQuery.pageSize" @pagination="resetArticleList" />
      </div>
    </div>
  </div>
</template>

<script setup name="Category">
import { listCategory } from "@/api/ams/category";
import { listArticle } from "@/api/ams/article";
import { ref, onMounted } from 'vue';

const route = useRoute();
const router = useRouter();
const categoryList = ref([]);
const categoryBaseList = ref([]);
const categoryChildrenList = ref([]);
const articleList = ref([]);
const tagStyle = ref(["", "success", "info", "warning", "danger"]);
const total = ref(0);
const pageQuery = ref({
  pageNum: 1,
  pageSize: 20,
  categoryId: 0,
});
const fullscreenLoading = ref(true)
const navIndex = ref(0);
const tagIndex = ref(0);
const navCategoryId = ref(0);

/**跳转 */
function handleNatigation(id, path) {
  router.push({ path: path, query: { id: id } });
}

// 点击分类
function handleCheckParent(id, index) {
  if (id != 0) {
    categoryChildrenList.value = categoryList.value.filter(item => item.parentId == id);
    let zero = { id: 0, name: '全部' };
    categoryChildrenList.value.unshift(zero);
  } else {
    categoryChildrenList.value = [];
  }

  // 查看所有文章
  pageQuery.value.categoryId = id;
  navCategoryId.value = id;
  navIndex.value = index;
  resetArticleList();
}
// 点击子分类
function handleCheckChildren(id, index) {
  // 如果点击 全部
  if (id == 0) {
    pageQuery.value.categoryId = navCategoryId.value;
  } else {
    pageQuery.value.categoryId = id;
  }
  tagIndex.value = index;
  resetArticleList();
}

// 清空查询文章列表
function resetArticleList() {
  listArticle(pageQuery.value).then((res) => {
    articleList.value = res.data.list;
    total.value = res.data.total;
  }).finally(() => (fullscreenLoading.value = false))
}
/**获取所有分类 */
function getCategoryList() {
  listCategory().then((res) => {
    categoryList.value = res.data;
    categoryBaseList.value = categoryList.value.filter(item => item.parentId == 0);
    let zero = { id: 0, name: '推荐' };
    categoryBaseList.value.unshift(zero);
  });
}

// 查看文章详情
function handleArticleInfo(id) {
  router.push({ path: '/article', query: { articleId: id } })
}

onMounted(() => {
  getCategoryList();
  resetArticleList();
})

</script>

<style lang='scss' scoped>
.article_container {
  margin: 0 auto;
  padding-top: 80px;
  width: 1200px;
  .header {
    .blog_nav {
      display: flex;
      align-items: center;
    }

    .tag_list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;

      .blog_nav_item {
        margin-right: 30px;
        padding: 10px 24px 10px 24px;
        font-family: 'Ali_M';
        font-size: 22px;
        color: #365536;
        cursor: pointer;

        &:hover {
          color: #aed277;
        }
      }

      .active {
        color: #85b13b;
        background-color: #fff;
        border-radius: 8px 8px 0px 0px;
      }
    }

    .blog_tag {
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      background-color: #fff;
      .blog_tag_list {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding: 30px 0px 30px 0.600px;
        .blog_tag_item {
          margin-right: 16px;
          font-family: 'Ali_R';
          font-size: 14px;
          color: #707666;
          padding: 2px 14px;
          border-radius: 20px;
          cursor: pointer;

          &:hover {
            color: #222226;
          }
        }

        .active {
          color: #85b13b;
        }
      }

    }
  }


  .body {
    margin: auto;
    padding: 20px 0px;

    .article_list {
      margin-top: 20px;

      .article_item {
        width: 100%;
        padding: 10px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        background-color: #fff;
        box-sizing: border-box;
        cursor: pointer;
        border-radius: 6px;

        &:last-child {
          border-bottom: none;
        }

        .article_cover {
          display: flex;
          img {
            width: 250px;
            height: 160px;
            border-radius: 5px;
          }
        }

        .article_right {
          width: 100%;
          height: 100%;
          margin-left: 24px;
          
          .title {
            font-size: 20px;
            font-family: "Ali_M";
            color: #133103;
            margin-bottom: 20px;
          }

          .summary {
            font-size: 16px;
            font-family: 'Ali_R';
            color: #555666;
          }

          .article_meta {
            font-family: 'Ali_R';
            font-size: 16px;
            margin-top: 40px;
            display: flex;
            align-items: center;

            .meta_data {
              margin-right: 20px;
              .svg-icon{
                margin-right: 6px;
              }
            }
          }
        }
      }
    }
  }
}
</style>